<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>vue过滤器</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <script src="vue.js"></script>
    </head>
    <body>
        <div class="app">
            <p>{{ message | msgFormat('疯狂') }}</p>
        </div>
        <div id="app2">
            <p>{{ msg2 | msgFormat('') }}</p>
        </div>


        <script>

            //定义一个 Vue 全局的过滤器，名字叫做msgFormat,可以见得，这是一个函数
           /*  Vue.filter('msgFormat',function(message){

                //字符串的 replace() 方法，第一个参数，可以是字符串，也可以是正则表达式,添加 g 就是全局匹配
                return message.replace(/单纯/g,'老司机');
            }); */

            //因为 msgFormat 是一个函数，因为函数是可以传递参数的，因此可以通过 msgFormat('参数') 来传递参数
            //想要传递参数的时候，可以在 function() 里添加这个要传递的参数为第二个参数

            Vue.filter('msgFormat',function(message,arg){
                return message.replace(/单纯/g,arg);
            });
        
            var vm = new Vue({
                el:'.app',
                data:{
                    message:'曾经，我是一个单纯的小男孩，单纯的我，单纯的问着这样一个问题，谁是世界上最单纯的男人'
                },
                methods:{
                    
                }
            });

            //所谓的全局过滤器，就是所有的vm实例都会共享

            //如果自定义一个私有的过滤器(局部)
            var vm2 = new Vue({
                el:'#app2',
                data:{
                    msg2:'曾经，我是一个单纯的小男孩，单纯的我，单纯的问着这样一个问题，谁是世界上最单纯的男人'
                },
                methods:{

                },
                filters:{
                    //定义私有过滤器  过滤器有两个条件，【过滤器名称 和 处理函数】

                    //过滤器过滤的时候才用就近原则，如果私有过滤器和全局过滤器的名称是相同的，那么就优先调用私有过滤器
                    msgFormat:function(data,arg){
                        return data.replace(/单纯的/g,arg);
                    }
                }
            });

        
        </script>
    </body>
</html>